<template>
  <div class="report-handle-detail page-wrap ">
    <div class="detail-content">
      <Row>
        <Col span="2" class="left-title">手机号:</Col>
        <Col span="9">{{handlingReport.mobile}} <i v-if=" handlingReport.userType==1"class="icon icon-authed"></i></Col>
        <div class="right-title2">
          <span>当前状态:</span>
          <span>{{handlingReport.reportStatus==1?'处理中':'已办结'}} </span>
        </div>
      </Row>
      <Row>
        <Col span="2" class="left-title">发布时间:</Col>
        <Col span="9">{{handlingReport.createTime}}</Col>
        <div  class="right-title2">
          <span v-if="pageType=='view'">是否公示:</span>
          <span v-if="pageType=='view'">{{handlingReport.showFlag==1?'是':'否'}} </span>
        </div>
      </Row>
      <Row>
        <Col span="2" class="left-title">位置:</Col>
        <Col span="20">{{handlingReport.location}}</Col>
      </Row>
      <Row>
        <Col span="2" class="left-title content-name">内容:</Col>
        <Col span="20" class="content-describe">
        <pre  class="contentmes"> <span class="subjectname" @click.stop="goToSubject(handlingReport)" v-if="handlingReport.subjectName">{{handlingReport.subjectName}}</span>{{handlingReport.content}}</pre>
        </Col>
      </Row>
      <Row>
        <Col span="2" class="left-title content-name">&nbsp</Col>
        <Col span="22" class="content-describe">
        <div class="img-pane">
          <div class="img-box" v-for="(img,index) in handlingReport.photos">
            <img :src="img.fileUrl" alt=""  @click="bigImg(index)">

          </div>
        </div>
        </Col>
      </Row>
      <Row v-if="pageType=='view'">
        <Col span="24" style="text-align: right;">
        <button class="button ivu-btn ivu-btn-primary big-btn" @click="switchShow">{{handlingReport.showFlag==1?'对外隐藏':'对外显示'}}</button>
        </Col>
      </Row>
    </div>
    <!--第三方渠道-->
    <template v-if="pageType=='handle'">
      <!--
      <div class="othermessages" v-if="handlingReport.isSubmitZfhf != 2||(handlingReport.isSubmitZfhf==2 && zfhfReplyList&&zfhfReplyList.length > 0)">第三方处理渠道</div>
      <div class="handle-report reply" v-if="handlingReport.isSubmitZfhf!=2">
        <Row>
          <Checkbox class="search-checkout" v-model="isSubmitZfhf">提交【政风行风热线】</Checkbox>
          <div v-if="isSubmitZfhf">
            <Col span="2" class="submitZfhf-item-title"><span class="star">*</span>标题:</Col>
            <Col span="20" class="submitZfhf-item-input"><Input v-model="report.title" placeholder="必填项，此标题将提交到首都之窗投诉平台" class="input-frame" maxlength="30"></Input></Col>
          </div>
        </Row>
      </div>
      <div class="handle-report reply" v-if="handlingReport.isSubmitZfhf==2 && (zfhfReplyList&&zfhfReplyList.length > 0)">
        <div class="contenttextdown clearfix" v-for="item in zfhfReplyList">
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfSubmitTime">提交政风行风热线时间:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfSubmitTime">{{item.zfhfSubmitTime}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p>标题:</p>
            </div>
            <div class="contentcolor fl">
              <p>{{item.zfhfTitle}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfReplyDept">回复单位:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfReplyDept">{{item.zfhfReplyDept}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfReplyResult">首都之窗反馈结果:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfReplyResult">{{item.zfhfReplyResult}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfIsPublic==0||item.zfhfIsPublic==1">是否公开:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfIsPublic==0||item.zfhfIsPublic==1">{{item.zfhfIsPublic==0?'否':'是'}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfFeedbackTime">政风行风热线反馈时间:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfFeedbackTime">{{item.zfhfFeedbackTime}}</p>
            </div>
          </div>
        </div>

      </div>
      -->

      <!--客服自处理-->
      <div class="othermessages po-reletive self-handle">客服自处理<span class="view-history" @click="viewRecord()" >查看处理历史记录（{{handleRecordCount}}）</span></div>
      <div class="handle-report reply clearfix" v-if="pageType=='handle'">
        <Row>
          <Col span="2" class="self-handle-item"><span class="star">*</span>处理途径:</Col>
          <Col span="20" class="self-handle-item-input"><Input maxlength="100" v-model="report.reportChannel" placeholder="例：致电122道路交通服务台"  class="input-frame"></Input></Col>
        </Row>
        <Row>
          <Col span="2" class="self-handle-item"><span class="star">*</span>处理结果:</Col>
          <Col span="20" class="self-handle-item-input">
          <Input v-model="report.reportResult" maxlength = "200" type="textarea" :rows="4" class="input-frame height-180" placeholder="例：已得到122道路交通服务台回复，交警将在15分钟内到达现场进行处理"></Input>
          <div class="">
            <Checkbox v-model="isConfirm" class="search-checkout confirm-done">此事办结，请用户确认处理结果</Checkbox>
            <Checkbox v-model="showFlag" class="search-checkout confirm-done">对外公示</Checkbox>
          </div>
          </Col>
        </Row>
        <div class="btn-pane">
          <Button type="primary" @click="goBackList"><i class="icon icon-arrow-left"></i>返回列表</Button>
          <Button type="primary" @click="viewNotifyInfo"><span v-html="btnText">保存并继续<i class="icon icon-arrow-right"></i></span></Button>
        </div>
      </div>
    </template>
    <!--详情页-->
    <template v-if="pageType=='view'">
	  <!--
      <div class="othermessages" v-if=" handlingReport.isSubmitZfhf==2 && zfhfReplyList && zfhfReplyList.length > 0">第三方处理渠道</div>
      <div class="handle-report reply" v-if="handlingReport.isSubmitZfhf==2&&zfhfReplyList&&zfhfReplyList.length > 0">
        <div class="contenttextdown clearfix" v-for="item in zfhfReplyList">
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfSubmitTime">提交政风行风热线时间:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfSubmitTime">{{item.zfhfSubmitTime}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p>标题:</p>
            </div>
            <div class="contentcolor fl">
              <p>{{item.zfhfTitle}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfReplyDept">回复单位:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfReplyDept">{{item.zfhfReplyDept}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfReplyResult">首都之窗反馈结果:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfReplyResult">{{item.zfhfReplyResult}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfIsPublic==0||item.zfhfIsPublic==1">是否公开:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfIsPublic==0||item.zfhfIsPublic==1">{{item.zfhfIsPublic==0?'否':'是'}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.zfhfFeedbackTime">政风行风热线反馈时间:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.zfhfFeedbackTime">{{item.zfhfFeedbackTime}}</p>
            </div>
          </div>
        </div>
      </div>
	  -->
      <!--历史处理过程-->
      <div class="othermessages" v-if="handleRecordList.length > 0">历史处理过程</div>
      <div class="handle-report reply" v-if="handleRecordList.length > 0">
        <div class="contenttextdown clearfix" v-for="item in handleRecordList">
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.serviceHandleWay">处理渠道:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.handleWay">{{item.handleWay}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.handleWay">处理方式:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.serviceHandleWay">{{item.serviceHandleWay}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.serviceHandleResult">处理结果:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.serviceHandleResult">{{item.serviceHandleResult}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.handlePerson">处理人:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.handlePerson">{{item.handlePerson}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="item.handleTime">处理时间:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="item.handleTime">{{item.handleTime}}</p>
            </div>
          </div>
        </div>
		<div class="page-container">
			<div class="page" v-if="dataTotal>pageSize">
			  <Page :total=dataTotal :pageSize=pageSize :current=pageNum @on-change="search" show-total>
			  </Page>
			</div>
		</div>
      </div>
      <!--用户反馈记录-->
      <div class="othermessages" v-if="handlingReport.userFeedback">用户反馈记录</div>
      <div class="handle-report reply" v-if="handlingReport.userFeedback">
        <div class="contenttextdown clearfix">
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="handlingReport.userFeedbackTime">用户反馈时间:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="handlingReport.userFeedbackTime">{{handlingReport.userFeedbackTime}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="handlingReport.userFeedback">反馈结果:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="handlingReport.userFeedback">{{handlingReport.userFeedback}}</p>
            </div>
          </div>
          <div class="col4 clearfix" >
            <div class="titlecolor fl">
              <p v-if="handlingReport.userFeedbackContent">用户反馈内容:</p>
            </div>
            <div class="contentcolor fl">
              <p v-if="handlingReport.userFeedbackContent">{{handlingReport.userFeedbackContent}}</p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!--历史记录列表-->
    <Modal v-model="recordModal" width="800" style="overflow-x: auto" :on-cancel=cancel class="ssp-modal hx-big-modal">
      <p slot="header" >
        <span>历史处理过程</span>
      </p>
      <div class="tableDiv" style="text-align:center">
        <div class="handle-report reply" v-if="handleRecordList.length > 0">
          <div class="contenttextdown clearfix" v-for="item in handleRecordList">
            <div class="col4 clearfix" >
              <div class="titlecolor fl">
                <p v-if="item.serviceHandleWay">处理渠道:</p>
              </div>
              <div class="contentcolor fl">
                <p v-if="item.handleWay">{{item.handleWay}}</p>
              </div>
            </div>
            <div class="col4 clearfix" >
              <div class="titlecolor fl">
                <p v-if="item.handleWay">处理方式:</p>
              </div>
              <div class="contentcolor fl">
                <p v-if="item.serviceHandleWay">{{item.serviceHandleWay}}</p>
              </div>
            </div>
            <div class="col4 clearfix" >
              <div class="titlecolor fl">
                <p v-if="item.serviceHandleResult">处理结果:</p>
              </div>
              <div class="contentcolor fl">
                <p v-if="item.serviceHandleResult">{{item.serviceHandleResult}}</p>
              </div>
            </div>
            <div class="col4 clearfix" >
              <div class="titlecolor fl">
                <p v-if="item.handlePerson">处理人:</p>
              </div>
              <div class="contentcolor fl">
                <p v-if="item.handlePerson">{{item.handlePerson}}</p>
              </div>
            </div>
            <div class="col4 clearfix" >
              <div class="titlecolor fl">
                <p v-if="item.handleTime">处理时间:</p>
              </div>
              <div class="contentcolor fl">
                <p v-if="item.handleTime">{{item.handleTime}}</p>
              </div>
            </div>
          </div>
          <div class="page" v-if="dataTotal>pageSize">
            <Page :total=dataTotal :pageSize=pageSize :current=pageNum @on-change="search" show-total>
            </Page>
          </div>
        </div>
        <div class="handle-report reply clearfix" v-if="handleRecordList.length == 0">
          <p class="nodataText">暂无处理</p>
        </div>
      </div>
      <div slot="footer">
      </div>
    </Modal>
    <!--返回通知预览-->
    <Modal class="ssp-modal"
           v-model="viewNotify"
           title="发送消息"
           width="500"
    >
      <textarea class="view-notify-content" v-model="notifyText"></textarea>
      <div slot="footer">
        <i-button type="" class="ivu-btn-primary" @click="confirm">确定</i-button>
      </div>
    </Modal>
    <!--放大-->
    <big-img v-model=imgSwitch :img-index=imgIndex :photo-list=photoList @reset="reset"></big-img>
    <!--提示框-->
    <Modal class="warning-modal"
           v-model="showWarnModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="warn-modal-body">
        <i class="modal-icon"></i>
        <!--<img src="../img/warning.png" alt=""/>-->
        <p class="modal-content">{{warnContent}}</p>
      </div>
      <div slot="footer">
        <div class="warn-modal-footer">
          <span class="modal-close-btn" @click="closeModal">确定</span></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import index from  "./handle-detail.js"
  export default index ;
</script>
<style >
  .report-handle-detail .btn-pane{float:right;margin-bottom: 10px;}
  .report-handle-detail .input-frame{width:500px;margin-bottom: 5px;}
  .report-handle-detail .height-180{height:120px;}
  .report-handle-detail textarea.ivu-input{height: 120px;line-height: 20px;}
  .report-handle-detail .view-history{float:right;color:#3F94FC;font-size: 16px;position: absolute;top:50%;right:30px;z-index:99;margin-top:-13px;}
  .report-handle-detail .view-history:hover{cursor: pointer;}
  .report-handle-detail .confirm-done{
    font-size: 14px;
    color: #2B3642;
    letter-spacing: 0;
    line-height: 22px;
  }
  .report-handle-detail .big-btn{
    margin: 10px;
  }
  .history-record>p{padding-bottom:20px;font-size: 18px;color: #333;}
  .po-reletive{position:relative;}

  .handle-report{position: relative;padding-left: 30px}
  .ivu-table td.handle-time,.ivu-table th.handle-time{min-width: 300px;}
  .handle-report .titlecolor p{padding-right: 20px;min-width: 164px;}
  .handle-report .contenttextdown{padding:0 16px 0 0;line-height: 18px;}
  .subjectname{
    margin-right: 10px;
    color: #3F94FC;
    cursor: pointer;
  }
  .contentmes{
    white-space: nowrap;
  }
  .self-handle{
    margin-top: 20px;
  }
  .self-handle-item, .submitZfhf-item-title{
    width: 92px !important;
    line-height: 40px !important;
  }
  .self-handle-item-input,.submitZfhf-item-input{
    padding-left: 0!important;
  }
  .handle-report .submitZfhf-item-title{
    text-align: left;
  }
  .page-container {
	text-align: right;
  }
  .page-container .page {
	float: none;
  }
</style>
